<template>
  <div class="planet-wrap">
    <div class="planet-header">
      <div class="header-left">
        <a
          @click="selectDefaulTab"
          :class="showCompIndex === 0 ? 'active' : ''"
        >
          推荐
        </a>
        <div class="dynamicTabWrap" @click="selectTab">
          <a
            v-for="(item, index) of data.tab_list"
            :key="index"
            @click="toggleSeriesData(index)"
            :class="
              showCompIndex === 1 && showSeriesIndex === index ? 'active' : ''
            "
            >{{ item.title }}</a
          >
        </div>
      </div>
      <div class="header-right">
        <router-link tag="i" class="icon iconfont iconyonghu" to="../mine">
        </router-link>
      </div>
    </div>
    <div class="planet-content">
      <keep-alive>
        <component
          :is="comps[showCompIndex]"
          :data="compData"
          class="planet-content-scroll"
        ></component>
      </keep-alive>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import planetData from 'assets/json/planet'
import Scroll from 'common/scroll/scroll'
import note9series from 'assets/json/note9-series'
import tenXseries from 'assets/json/10X-series'

const Recommend = () => import('./components/recommend')
const Series = () => import('./components/series')

const RECOMMEND_NUM = 0
const SERIES_NUM = 1

export default {
  data() {
    return {
      data: planetData.data,
      showCompIndex: 0,
      comps: ['recommend', 'series'],
      seriesDatas: [note9series, tenXseries],
      showSeriesIndex: 0
    }
  },

  computed: {
    compData() {
      return this.comps[this.showCompIndex] === 'recommend'
        ? this.data
        : this.seriesDatas[this.showSeriesIndex]
    }
  },
  mounted() {},
  methods: {
    selectDefaulTab() {
      this.showCompIndex = RECOMMEND_NUM
    },
    selectTab() {
      this.showCompIndex = SERIES_NUM
    },
    toggleSeriesData(index) {
      this.showSeriesIndex = index
    }
  },
  watch: {
    showCompIndex() {},
    showSeriesIndex() {}
  },
  components: {
    Scroll,
    Recommend,
    Series
  }
}
</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
.planet-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;

  .planet-header {
    flex: 0 0 0.827rem;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 6.72rem;
    height: 0.827rem;
    line-height: 0.827rem;
    overflow: hidden;

    .header-left {
      margin-left: 0.24rem;

      .dynamicTabWrap {
        display: inline-block;
      }

      a {
        margin-right: 0.36rem;
        display: inline-block;
        height: 0.827rem;
        line-height: 0.827rem;
        font-size: 0.32rem;
        font-weight: 700;
        color: #3c3c3c;

        &:last-child {
          margin-right: 0;
        }

        &.active {
          color: #ff6700;
        }
      }
    }

    .header-right {
      width: 0.52rem;
      height: 0.827rem;
      line-height: 0.827rem;

      .icon {
        display: inline-block;
        width: 0.52rem;
        height: 0.52rem;
        line-height: 0.52rem;
        font-size: 0.32rem;
        text-align: center;
        background: #e8e8e8;
        color: #fdfafa;
        border-radius: 50%;
      }
    }
  }

  .planet-content {
    flex: 1;
    overflow: hidden;

    .planet-content-scroll {
      max-height: 100%;
    }
  }
}
</style>